<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css3-斜线使用border制作</title>
</head>
<style lang="css">
  * {
    margin: 0;
    padding: 0;
  }

  .vs-bar {
    position: relative;
    display: flex;
    width: 100%;
    z-index: 1;
    text-indent: 30px;
  }

  .bar-a {
    position: relative;
    width: 50%;
    height: 40px;
    background-color: #c93c5d;
    box-sizing: border-box;
  }

  .bar-b {
    position: relative;
    width: 50%;
    height: 40px;
    background-color: #306dca;
    box-sizing: border-box;
  }

  .team-vs-bar .bar-b:after,
  .team-vs-bar .bar-a:after {
    position: relative;
    display: block;
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 20px;
    border-color: transparent;
  }

  .team-vs-bar .bar-a:after {
    right: -20px;
    top: 0;
    border-top-color: green;
    z-index: 1;
  }

  .team-vs-bar .bar-b:after {
    left: -20px;
    bottom: 0;
    border-bottom-color: orange;
  }

  /* 条形图 */

  .vs-wrapper-2 {
    margin-top: 20px;
  }

  .vs-wrapper-2 .team-vs-bar .bar-a:after {
    border-top-color: #c93c5d;
  }

  .vs-wrapper-2 .team-vs-bar .bar-b:after {
    border-bottom-color: #306dca;
  }
</style>

<body>
  <h1> z-index的使用比较奇怪</h1>
  <div class="vs-wrapper">
    <div class="vs-bar team-vs-bar">
      <div class="bar-a">
      </div>
      <div class="bar-b">
      </div>
    </div>
  </div>

  <div class="vs-wrapper-2">
    <div class="vs-bar team-vs-bar">
      <div class="bar-a">
        曼联
      </div>
      <div class="bar-b">
        爵士
      </div>
    </div>
  </div>
</body>

</html>